import React, {useReducer} from 'react';
import {Provider} from './context'
import Child from "./components/Child";

function App(props) {
    const [state,dispatch] = useReducer(function (preState,{type,payload}) {
        const state = {...preState}
        if(typeof payload==='number'){
            switch (type) {
                case 'increment':
                    state.num += payload
                    return state
                case 'decrement':
                    state.num -= payload
                    return state
            }
        }else{
            if(type==='CHANGE_USERNAME'){
                state.userName = payload.userName
                return state
            }else if(type === 'CHANGE_AGE'){
                state.age = payload.age
                return state
            }
        }

    },{userName:'zhangsan',age:18,num:1})
    console.log(state)
    return (
        <div>
            <button onClick={()=>dispatch({type:'decrement',payload:2})}>-</button>{state.num}<button onClick={()=>dispatch({type:'increment',payload:5})}>+</button>
            <Provider value={1}>
                <Child/>
            </Provider>
            <button onClick={()=>dispatch({type:'CHANGE_USERNAME',payload:{userName:'lili'}})}>{state.userName}</button>
        </div>
    );
}

export default App;